<template>
  <div class="account-settings-info-view">
    <a-card :bordered="false">
      <a-row :gutter="16">
        <a-col :md="24" :lg="16">
          <a-form-model
            ref="ruleForm"
            :model="companyInfo"
            layout="vertical">
            <a-form-model-item
              label="姓名"
              prop="companyName"
              ref="companyName"
              :rules="$valid.required"
              :maxLength="50">
              <a-input v-model="companyInfo.companyName" placeholder="请输入"/>
            </a-form-model-item>
            <a-form-model-item
              label="手机号"
              prop="mobile"
              ref="mobile"
              :rules="[$valid.checkMobile]"
              :maxLength="11">
              <a-input v-model="companyInfo.mobile" placeholder="请输入联系电话"/>
            </a-form-model-item>
            <a-form-model-item
              label="性别"
              prop="sex"
              :required="true"
            >
              <a-select v-model="companyInfo.sex" placeholder="请选择性别">
                <a-select-option
                  v-for="(item) in this.$sysDictOptions('sex')"
                  :key="item.k"
                  :value="parseInt(item.k)">
                  {{ item.v }}
                </a-select-option>
              </a-select>
            </a-form-model-item>
            <a-form-model-item label="电子签名" prop="electronicSignature">
              <w-image-upload
                class="avatar-uploader"
                text="上传"
                :multipleFlag="false"
                :fileMaxSize="1"
                ref="electronicSignature"
                v-model="companyInfo.electronicSignature"
                bizPath="electronicSignature"
              ></w-image-upload>
            </a-form-model-item>
            <a-form-item>
              <a-button
                type="primary"
                @click="handleSubmit"
                v-wx-role="60101">保存</a-button>
            </a-form-item>
          </a-form-model>
        </a-col>
        <a-col
          :md="24"
          :lg="8"
          :style="{ minHeight: '180px' }">
          <div class="ant-upload-preview" @click="$refs.modal.edit(companyInfo.avatar,'avatar')">
            <a-icon type="cloud-upload-o" class="upload-icon"/>
            <div class="mask">
              <a-icon type="plus"/>
            </div>
            <img :src="avatar?this.$getFileAccessHttpUrl(avatar):require('@/assets/image/employeeImg.png')"/>
          </div>
        </a-col>
      </a-row>
      <avatar-modal ref="modal" @ok="setavatar"/>
    </a-card>
  </div>
</template>

<script>
  import AvatarModal from './AvatarModal'
  import { getAction, postAction } from '@/api/manage'
  import WImageUpload from '@/components/WxImageUpload/WImageUpload'
  import pick from 'lodash.pick'
  import { mapActions } from 'vuex'

  export default {
    components: {
      AvatarModal,
      WImageUpload
    },
    data () {
      return {
        // cropper
        preview: {},
        option: {
          info: true,
          size: 1,
          outputType: 'jpeg',
          canScale: false,
          autoCrop: true,
          // 只有自动截图开启 宽度高度才生效
          autoCropWidth: 180,
          autoCropHeight: 180,
          fixedBox: true,
          // 开启宽度和高度比例
          fixed: true,
          fixedNumber: [1, 1]
        },
        companyInfo: {
          sex: 1,
          avatar: '',
          electronicSignature: undefined
        },
        avatar: '',
        url: {
          saveCurrentCompany: '/system/company/currentCompanyInfo',
          getCurrentCompany: '/system/company/currentCompanyInfo'
        }
      }
    },
    mounted () {
      console.log(this.$valid.required)
      const that = this
      getAction(this.url.getCurrentCompany).then((res) => {
        that.companyInfo = res.result.companyInfo
        this.avatar = that.companyInfo.avatar
        that.companyInfo = (pick(res.result.companyInfo, 'companyName', 'avatar', 'sex', 'mobile', 'electronicSignature'))
      })
    },
    methods: {
      ...mapActions(['GetInfo']),
      setavatar (url) {
        this.companyInfo.avatar = url
        this.avatar = url
      },
      handleSubmit () {
        const that = this
        // 触发表单验证
        this.$refs.ruleForm.validate(valid => {
          console.log(valid)
          if (valid) {
            postAction(this.url.saveCurrentCompany, that.companyInfo).then(res => {
              that.$message.success(res.content)
              this.GetInfo({})
            }).finally(() => {
            })
          }
        })
      }
    }
  }
</script>

<style lang="less" scoped>

  .avatar-upload-wrapper {
    height: 200px;
    width: 100%;
  }

  .ant-upload-preview {
    position: relative;
    margin: 0 auto;
    width: 100%;
    max-width: 180px;
    border-radius: 50%;
    box-shadow: 0 0 4px #ccc;

    .upload-icon {
      position: absolute;
      top: 0;
      right: 10px;
      font-size: 1.4rem;
      padding: 0.5rem;
      background: rgba(222, 221, 221, 0.7);
      border-radius: 50%;
      border: 1px solid rgba(0, 0, 0, 0.2);
    }

    .mask {
      opacity: 0;
      position: absolute;
      background: rgba(0, 0, 0, 0.4);
      cursor: pointer;
      transition: opacity 0.4s;

      &:hover {
        opacity: 1;
      }

      i {
        font-size: 2rem;
        position: absolute;
        top: 50%;
        left: 50%;
        margin-left: -1rem;
        margin-top: -1rem;
        color: #d6d6d6;
      }
    }

    img, .mask {
      width: 100%;
      max-width: 180px;
      height: 100%;
      border-radius: 50%;
      overflow: hidden;
    }
  }
</style>
